// 使用登记
<template>
    <f7-page class="common-page page-tab">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>使用登记</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <van-tabs sticky :ellipsis="false">
            <van-tab name="#tab1" title="使用登记牌">
                <!-- 使用登记 -->
                <div id="tab1">
                    <template v-if="controlData.useFileAttachId">
                        <iframe
                            :src="`static/pdfjs/web/viewer.html?file=${path}`"
                            style="border: 0px !important; margin-top: 2px"
                            width="100%"
                            height="600px"
                        ></iframe>
                    </template>
                    <div class="p15" v-else>
                        <v-empty description="流程未办结，暂无回执"></v-empty>
                    </div>
                </div>
            </van-tab>
            <van-tab name="#tab2" title="基本信息">
                <!-- 基本信息 -->
                <div id="tab2">
                    <f7-list media-list class="search-list">
                        <li
                            v-for="(item, index) in query.tab2List1"
                            :key="'tab2List1' + index"
                            class="base-info qzjx-card"
                        >
                            <div class="title">
                                <span class="label">{{ item.label }}</span>
                                <span class="value">{{
                                    controlData.caseVo[item.key][item.key1] ||
                                    '--'
                                }}</span>
                            </div>
                            <ul class="bottom-list">
                                <li
                                    v-for="child in item.children"
                                    :key="child.key"
                                >
                                    <span class="label">{{ child.label }}</span>
                                    <template
                                        v-if="child.key == 'equipmentType'"
                                    >
                                        <span class="value">{{
                                            controlData.caseVo[item.key][
                                                child.key
                                            ]
                                                | DictItem(
                                                    controlData.equipmentTypes
                                                )
                                        }}</span>
                                    </template>
                                    <template v-else>
                                        <span class="value">{{
                                            controlData.caseVo[item.key][
                                                child.key
                                            ] || '--'
                                        }}</span>
                                    </template>
                                </li>
                            </ul>
                        </li>
                        <li class="base-info qzjx-card">
                            <div class="title">
                                <span class="label">检测信息</span>
                                <span class="value">{{
                                    controlData.caseVo.check.checkCode || '--'
                                }}</span>
                            </div>
                            <ul class="bottom-list">
                                <li>
                                    <span class="label">检测报告</span>
                                    <span
                                        class="value link"
                                        @click="viewFile()"
                                        v-if="
                                            controlData.caseVo.check
                                                .checkFileList &&
                                            controlData.caseVo.check
                                                .checkFileList.length > 0
                                        "
                                        >{{
                                            controlData.caseVo.check
                                                .checkFileList[0].fileName
                                        }}</span
                                    >
                                    <span class="value" v-else>--</span>
                                </li>
                                <li>
                                    <span class="label">检测日期</span>
                                    <span class="value">{{
                                        controlData.caseVo.check.checkTime
                                            | date('yyyy-MM-dd') || '--'
                                    }}</span>
                                </li>
                                <li>
                                    <span class="label">检测单位</span>
                                    <span class="value">{{
                                        controlData.caseVo.check.checkOrgName ||
                                        '--'
                                    }}</span>
                                </li>
                            </ul>
                        </li>
                        <div class="qzjx-card install">
                            <div class="title">使用信息</div>
                            <ul class="bottom-list">
                                <li
                                    v-for="(item, index) in query.tab2List2"
                                    :key="item.key + index"
                                >
                                    <span class="label">{{ item.label }}</span>
                                    <template
                                        v-if="item.key == 'acceptTime'"
                                    >
                                        <span class="value">{{
                                            models.use[item.key] | date('yyyy-MM-dd') || '--'
                                        }}</span>
                                    </template>
                                    <template v-else>
                                        <span class="value">{{
                                            models.use[item.key] || '--'
                                        }}</span>
                                    </template>
                                </li>
                                <li
                                    v-for="item in query.tab2List3"
                                    :key="item.key"
                                >
                                    <span class="label">{{ item.label }}</span>
                                    <span class="value">{{
                                        models.model[item.key] || '--'
                                    }}</span>
                                </li>
                            </ul>
                        </div>
                    </f7-list>
                </div>
            </van-tab>
            <van-tab name="#tab3" title="使用人员">
                <!-- 使用人员 -->
                <div id="tab3" class="p15">
                    <v-accordion
                        v-for="(item, index) in query.tab3List"
                        :key="'tab3List' + index"
                        :title="item.label"
                        class="qzjx-accordion"
                    >
                        <div class="p15">
                            <template
                                v-if="
                                    models[item.key] &&
                                    models[item.key].length > 0
                                "
                            >
                                <div
                                    class="img-info-list"
                                    v-for="(person, personIndex) in models[
                                        item.key
                                    ]"
                                    :key="'personIndex' + personIndex"
                                >
                                    <img
                                        v-if="item.personPhotoAttachId"
                                        :src="
                                            $util.getImgSrc(
                                                item.personPhotoAttachId
                                            )
                                        "
                                        alt=""
                                    />
                                    <img
                                        v-else
                                        src="../../../../assets/img/qzjx/defaultAvatar.png"
                                        alt=""
                                    />
                                    <div class="info-box">
                                        <h3>{{ person.personName }}</h3>
                                        <p>
                                            {{
                                                person.workType
                                                    | DictItem(
                                                        controlData.personJobTypes
                                                    )
                                            }}
                                        </p>
                                    </div>
                                </div>
                            </template>
                            <v-empty v-else description="暂无数据"></v-empty>
                        </div>
                    </v-accordion>
                </div>
            </van-tab>
            <van-tab name="#tab4" title="附件材料">
                <!-- 附件材料 -->
                <div id="tab4" class="p15">
                    <v-accordion
                        v-for="(item, index) in list$1"
                        :key="'tab4List' + index"
                        :title="`${index + 1}、${item.customName}`"
                        class="qzjx-accordion"
                        :opened="item.attachments.length > 0 ? true : false"
                    >
                        <div class="p15">
                            <div class="sub-title" v-if="item.customDesc">
                                说明：{{ item.customDesc }}
                            </div>
                            <qm-file-list
                                :params="{
                                    dataKey: models.model.caseId,
                                    bizType: item.bizType,
                                }"
                                :uploadId="'fileList' + index"
                                :isDefaultFile="true"
                                :defaultFiles="item.attachments"
                            ></qm-file-list>
                        </div>
                    </v-accordion>
                </div>
            </van-tab>
            <van-tab name="#tab5" title="流程进度">
                <!-- 流程进度 -->
                <div id="tab5" class="p15">
                    <section class="qzjx-card">
                        <div class="title" style="font-size: 16px">
                            业务流程
                        </div>
                        <v-workflow-step
                            :data="history.data"
                            :activeStep="history.activeStep"
                        ></v-workflow-step>
                    </section>
                    <section class="qzjx-card">
                        <div class="title" style="font-size: 16px">
                            操作记录
                        </div>
                        <v-workflow-list
                            :data="controlData.workflow.history"
                        ></v-workflow-list>
                    </section>
                </div>
            </van-tab>
        </van-tabs>
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/workflowController'
import Config from '@/libs/config.js'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: [
                '/workflow/serviceGuideExt/getEntityByCode',
                '/app/equipment/eqmUse/workflow/getWorkflowViewModel',
            ],
        }
    }

    onInit() {
        this.$params.appCode = 'eqmUse'
    }
    // onBeforeQuery (type, conditions, params) {
    //   params.formId=this.$params.caseId
    // }
    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
            this.context.history = result.controlData.progress
        } else {
            if (!result.controlData.caseVo.maintenanceOrg)
                result.controlData.caseVo.maintenanceOrg = {}
            if (!result.controlData.caseVo.engineeBaseInfo)
                result.controlData.caseVo.engineeBaseInfo = {}
            if (!result.controlData.caseVo.installOrg)
                result.controlData.caseVo.installOrg = {}
            if (!result.controlData.caseVo.property)
                result.controlData.caseVo.property = {}
            if (!result.controlData.caseVo.check)
                result.controlData.caseVo.check = {}
            if (!result.controlData.caseVo.useOrg)
                result.controlData.caseVo.useOrg = {}
            this.vm.getFileList(
                'EQM_USE',
                result.models.model.caseId,
                'list$1',
                result.controlData.caseVo.property.equipmentType
            )
        }
        return result
    }
    mixin() {
        return {
            components: {},
            data() {
                return {
                    history: {
                        activeStep: 0,
                        data: [
                            {
                                taskName: '填写使用登记',
                                taskDesc:
                                    '申请人填写使用登记内容，上传相关证明材料',
                                isActive: 1,
                            },
                            {
                                taskName: '经办人受理',
                                taskDesc: '经办人受理申请，预审申请信息',
                                isActive: 0,
                            },
                            {
                                taskName: '审核人审核',
                                taskDesc: '审核人审核申请材料',
                                isActive: 0,
                            },
                        ],
                    },
                    query: {
                        tab2List1: [
                            {
                                label: '使用设备',
                                key: 'property',
                                key1: 'propertyCode',
                                children: [
                                    { label: '设备类型', key: 'equipmentType' },
                                    {
                                        label: '产权单位',
                                        key: 'enterpriseName',
                                    },
                                ],
                            },
                            {
                                label: '用于工程',
                                key: 'engineeBaseInfo',
                                key1: 'engineeCode',
                                children: [
                                    { label: '工程名称', key: 'engineeName' },
                                    {
                                        label: '工程地址',
                                        key: 'engineeAddress',
                                    },
                                ],
                            },
                            {
                                label: '安装单位',
                                key: 'installOrg',
                                key1: 'enterpriseName',
                                children: [
                                    {
                                        label: '统一社会信用代码',
                                        key: 'creditCode',
                                    },
                                    { label: '单位地址', key: 'address' },
                                ],
                            },
                            {
                                label: '使用单位',
                                key: 'useOrg',
                                key1: 'enterpriseName',
                                children: [
                                    {
                                        label: '统一社会信用代码',
                                        key: 'creditCode',
                                    },
                                    { label: '单位地址', key: 'address' },
                                ],
                            },
                            {
                                label: '维保单位',
                                key: 'maintenanceOrg',
                                key1: 'enterpriseName',
                                children: [
                                    {
                                        label: '统一社会信用代码',
                                        key: 'creditCode',
                                    },
                                    { label: '单位地址', key: 'address' },
                                ],
                            },
                        ],
                        tab2List2: [
                            {
                                label: '验收日期',
                                key: 'acceptTime',
                            },
                            {
                                label: '验收单位',
                                key: 'acceptOrgName',
                            },
                        ],
                        tab2List3: [
                            {
                                label: '申报人',
                                key: 'contact',
                            },
                            {
                                label: '申报人联系方式',
                                key: 'contactTel',
                            },
                            {
                                label: '申报人身份证',
                                key: 'contactIdcard',
                            },
                        ],
                        tab3List: [
                            {
                                label: '使用人员',
                                key: 'usePersonList',
                            },
                        ],
                    },
                    list$1: [],
                    controlData: {
                        caseVo: {
                            property: {},
                            engineeBaseInfo: {},
                            maintenanceOrg: {},
                            installOrg: {},
                            check: {},
                            useOrg: {},
                        },
                        workflow: {},
                    },
                    models: {
                        model: {},
                        use: {},
                    },
                }
            },
            computed: {
                path() {
                    return encodeURIComponent(
                        this.$util.getFileSrc(this.controlData.useFileAttachId)
                    )
                },
            },
            methods: {
                getFileList(typeCode, dataKey, name, attachCraneType) {
                    this.$f7.request.post(
                        '/admin/attachmentFormDetail/listUpload',
                        { typeCode, dataKey, attachCraneType },
                        (r) => {
                            r = JSON.parse(r)
                            if (r?.success && r.parameters.fileList) {
                                this[name] = r.parameters.fileList
                                return
                            }
                            this[name] = []
                            this.$framework.$f7.dialog.toast('获取文件失败')
                        }
                    )
                },
                viewFile() {
                    this.$f7router.navigate(
                        `/business/qzjx/fileView?attachmentId=${this.controlData.caseVo.check.checkFileList[0].attachmentId}`
                    )
                },
            },
            mounted() {
                console.log(this)
            },
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
#tab3 {
    .title {
        font-size: 15px;
    }
}
.common-page.page-tab .base-info .bottom-list li .link{
    color: #1990FF;
}
</style>
